<!DOCTYPE html> 
<html> 
  <head> 
    <title>jquery.multi-select.js - Demos</title>
    <meta name="description" content="Demos page for jquery.multi-select.js jquery plugin. Callbacks, multiples select on a single page, outside calls examples.">
    <link href="css/multi-select.css" rel="stylesheet" type="text/css">
    <link href="css/application.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23068623-1']);
      _gaq.push(['_setDomainName', '.loudev.com']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </head> 
  <body>
    <div id='page'>
      <a href='https://github.com/lou/multi-select/zipball/master' class='download button green'><img src='img/download.png' width='16' height='16'/>Download</a>  
      <h1>jquery.multi-select.js</h1>
      <ul id='menu'>
        <li><a href='index.html'>Home</a></li>
        <li>&middot;</li>
        <li class='active'><a href='demos.html'>Demos</a></li>
        <li>&middot;</li>
        <li><a href='documentation.html'>Documentation</a></li>
        <li id='fork-me'>Fork me on <a href='https://github.com/lou/multi-select'>Github</a></li>
      </ul>
      <div id='demos-container'>
        <ul id='demos-menu'>
          <li id='simple' class='active'>Simple</li>
          <li id='keeporder'>Keep Order</li>
          <li id='optgroup'>Optgroup</li>
          <li id='callbacks'>Callbacks</li>
          <li id='outside'>Outside call</li>
          <li id='multiple'>Multiple</li>
          <li id='headers'>Headers</li>
          <li id='submit-form'>Submit form</li>
          <li id='empty-form'>Empty array</li>
          <li id='disabled-select'>Disabled options</li>
          <li id='searchable'>Searchable</li>
        </ul>
        <div id='demos-content'>
          <div class='simple'>
             <form>
                <select multiple='multiple' class='multiselect' id='simpleCountries'>
                 <option value='fr'>France</option>
                 <option value='ca' selected='selected'>Canada</option>
                 <option value='ar' selected='selected'>Argentina</option>
                 <option value='pt'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn'>China</option>
                </select>
              </form>
          </div>
          <div class='keeporder' style='display:none'>
             <form>
                <select multiple='multiple' id='ikeeporder'>
                 <option value='fr'>France</option>
                 <option value='ca' selected='selected'>Canada</option>
                 <option value='ar' selected='selected'>Argentina</option>
                 <option value='pt'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn'>China</option>
                </select>
              </form>
          </div>
          <div class='optgroup' style='display:none'>
             <form>
                <select multiple='multiple' class='multiselect' id='optgroup'>
                  <optgroup label="europe">
                    <option value='fr'>France</option>
                    <option value='pt'>Portugal</option>
                    <option value='gb'>United Kingdom</option>
                  </optgroup>
                  <optgroup label="america south/north">
                    <option value='us'>United States</option>
                    <option value='ca'>Canada</option>
                    <option value='ar'>Argentina</option>
                  </optgroup>
                  <optgroup label='asia'>
                    <option value='cn'>China</option>
                  </optgroup>
                  <optgroup label='africa'>
                    <option value='ao'>Angola</option>
                    <option value='bq'>Burkina Faso</option>
                  </optgroup>
                </select>
              </form>
          </div>
          <div class='callbacks' style='display:none'>
            <form>
               <select multiple='multiple' id='callbackCountries'>
                 <option value='fr'>France</option>
                 <option value='ca' selected='selected'>Canada</option>
                 <option value='ar' selected='selected'>Argentina</option>
                 <option value='pt'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn'>China</option>
               </select>
             </form>
          </div>
          <div class='outside'  style='display:none'>
            <a href='#' id='selectAll'>Select all</a> | <a href='#' id='deselectAll'>Deselect all</a> | <a href='#' id='selectFR'>Select France</a> | <a href='#' id='deselectFR'>Deselect France</a>
            <br/><br/>
             <form>
                <select multiple='multiple' id='outsideCountries' class='multiselect'>
                  <optgroup label="europe">
                    <option value='fr'>France</option>
                    <option value='pt'>Portugal</option>
                    <option value='gb'>United Kingdom</option>
                  </optgroup>
                  <optgroup label="america">
                    <option value='us'>United States</option>
                    <option value='ca'>Canada</option>
                    <option value='ar'>Argentina</option>
                  </optgroup>
                  <optgroup label='asia'>
                    <option value='cn'>China</option>
                  </optgroup>
                  <optgroup label='africa'>
                    <option value='ao'>Angola</option>
                    <option value='bq'>Burkina Faso</option>
                  </optgroup>
                </select>
              </form>
          </div>
          <div class='multiple'  style='display:none'>
            <form>
               <select multiple='multiple' class='multiselect'>
                 <option value='fr'>France</option>
                 <option value='ca'>Canada</option>
                 <option value='ar'>Argentina</option>
                 <option value='pt'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn'>China</option>
               </select>
             </form>
             <form>
                <select multiple='multiple' class='multiselect'>
                  <option value='fr'>France</option>
                  <option value='ca'>Canada</option>
                  <option value='ar'>Argentina</option>
                  <option value='pt'>Portugal</option>
                  <option value='us'>United States</option>
                  <option value='gb'>United Kingdom</option>
                  <option value='au'>Australia</option>
                  <option value='ao'>Angola</option>
                  <option value='aq'>Antarctica</option>
                  <option value='bq'>Burkina Faso</option>
                  <option value='cn'>China</option>
                </select>
              </form>
          </div>
          <div class='headers'  style='display:none'>
            <form>
               <select multiple='multiple' id='multipleHeaders'>
                 <option value='fr'>France</option>
                 <option value='ca'>Canada</option>
                 <option value='ar'>Argentina</option>
                 <option value='pt'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn'>China</option>
               </select>
             </form>
          </div>
          <div class='submit-form'  style='display:none'>
            <form id='real-form' action='http://localhost:4567/ms' method='post'>
               <select name='countries[]' multiple='multiple' class='multiselect'>
                 <option value='fr'>France</option>
                 <option value='ca'>Canada</option>
                 <option value='ar'>Argentina</option>
                 <option value='pt'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn'>China</option>
               </select>
               <input type='submit' value='submit' />
             </form>
          </div>
          <div class='empty-form'  style='display:none'>
            <form id='empty-array-form' action='http://localhost:4567/ms' method='post'>
               <select name='countries[]' multiple='multiple' id='empty-array-select'>
                 <option value='fr'>France</option>
                 <option value='ca'>Canada</option>
                 <option value='ar'>Argentina</option>
                 <option value='pt'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn'>China</option>
               </select>
               <input type='submit' value='submit' />
             </form>
          </div>
          <div class='searchable'  style='display:none'>
            <form id='searchable-form' action='http://localhost:4567/ms' method='post'>
               <select name='countries[]' multiple='multiple' id='searchable-select'>
                 <option value='fr' selected='selected'>France</option>
                 <option value='ca'>Canada</option>
                 <option value='ar'>Argentina</option>
                 <option value='pt'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn'>China</option>
               </select>
               <input type='submit' value='submit' />
             </form>
          </div>
          <div class='disabled-select'  style='display:none'>
            <form>
               <select multiple='multiple' id='disabled-options' class='multiselect'>
                 <option value='fr' disabled='disabled'>France</option>
                 <option value='ca'>Canada</option>
                 <option value='ar'>Argentina</option>
                 <option value='pt' disabled='disabled' selected='selected'>Portugal</option>
                 <option value='us'>United States</option>
                 <option value='gb'>United Kingdom</option>
                 <option value='au'>Australia</option>
                 <option value='ao'>Angola</option>
                 <option value='aq'>Antarctica</option>
                 <option value='bq'>Burkina Faso</option>
                 <option value='cn' disabled='disabled'>China</option>
               </select>
             </form>
             <form>
                <select multiple='multiple' id='disabled-select' disabled='disabled' class='multiselect'>
                  <option value='fr'>France</option>
                  <option value='ca'>Canada</option>
                  <option value='ar' selected='selected'>Argentina</option>
                  <option value='pt'>Portugal</option>
                  <option value='us'>United States</option>
                  <option value='gb'>United Kingdom</option>
                  <option value='au'>Australia</option>
                  <option value='ao'>Angola</option>
                  <option value='aq'>Antarctica</option>
                  <option value='bq'>Burkina Faso</option>
                  <option value='cn'>China</option>
                </select>
              </form>
          </div>
        </div>
      </div>
    </page>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.quicksearch.js" type="text/javascript"></script>
    <script src="js/jquery.multi-select.js" type="text/javascript"></script>
    <script src="js/application.js" type="text/javascript"></script>
  </body>
</html>
